<template>
  <div class="mv-slider" @touchmove="onTouchMove">
    <div class="item-progress" @touchmove="onTouchMove">
      <sliderButton :value="value" :vertical="true" @input="onInput" />
    </div>
  </div>
</template>

<script>
import sliderButton from './button.vue';

export default {
    components: {
        sliderButton,
    },
    props: {
        value: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        onInput(data) {
            this.$emit('input', data);
        },
        onTouchMove(event) {
            event.preventDefault();
        },
    },
};
</script>

<style lang="less" scoped>
.mv-slider {
  height: 100px;
  width: 30px;
  padding: 20px 5px;
  border-radius: 4px;
  box-shadow: 0 0 2px darken(@player-wrapper-background, 20%);
  background-color: @player-wrapper-background;
  .item-progress {
    width: 9px;
    height: 100%;
    position: relative;
    margin: auto;
    border-radius: 30px;
    background-color: darken(@player-wrapper-background, 20%);
    box-shadow: 0 0 2px darken(@player-wrapper-background, 20%);
  }
}
</style>
